<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>增加学科 - 教师管理系统</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        neutral: '#64748B',
                        light: '#F8FAFC',
                        dark: '#1E293B'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input {
                @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary
                focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all duration-300;
            }
            .card-shadow {
                @apply shadow-md hover:shadow-lg transition-shadow duration-300;
            }
            .btn-effect {
                @apply transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg active:translate-y-0;
            }
        }
    </style>

    <style>
        /* 全局动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        /* 表单元素动画 */
        .form-group {
            transition: all 0.3s ease;
        }

        .form-group:focus-within {
            transform: translateX(4px);
        }

        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>
<body class="bg-light font-sans text-dark min-h-screen">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-3">
            <i class="fa fa-graduation-cap text-primary text-2xl"></i>
            <h1 class="text-xl font-bold">教师管理系统</h1>
        </div>
        <nav class="hidden md:flex items-center space-x-8">
            <a href="#" class="text-neutral hover:text-primary transition-colors text-xl">
                <i class="fa fa-home"></i>
            </a>
            <a href="#" class="text-neutral hover:text-primary transition-colors text-xl">
                <i class="fa fa-book"></i>
            </a>
            <a href="#" class="text-primary transition-colors text-xl">
                <i class="fa fa-folder-open"></i>
            </a>
            <a href="#" class="text-neutral hover:text-primary transition-colors text-xl">
                <i class="fa fa-users"></i>
            </a>
            <div class="flex items-center space-x-2 text-neutral text-xl">
                <i class="fa fa-user-circle"></i>
            </div>
        </nav>
        <button class="md:hidden text-neutral text-xl">
            <i class="fa fa-bars"></i>
        </button>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 页面标题和导航路径 -->
    <div class="mb-8">
        <div class="text-sm text-neutral mb-4">
            <a href="#" class="hover:text-primary">首页</a>
            <span class="mx-2">/</span>
            <span class="text-primary font-medium">增加学科</span>
        </div>
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">增加新学科</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mt-2"></div>
    </div>

    <!-- 表单卡片 -->
    <div class="bg-white rounded-xl p-6 md:p-8 card-shadow animate-fade-in">
        <form action="add" method="post" id="subjectForm" class="space-y-8">
            <!-- 基本信息部分 -->
            <div>
                <h3 class="text-lg font-semibold mb-5 flex items-center text-dark">
                    <i class="fa fa-info-circle text-primary mr-3"></i>基本信息
                    <div class="flex-grow h-px bg-gray-200 ml-3"></div>
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 学科名字 -->
                    <div class="form-group">
                        <label for="gname" class="block text-sm font-medium text-gray-700 mb-2">
                            学科名字 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="gname" name="gname" placeholder="请输入学科名称" class="form-input" required>
                        <p class="text-red-500 text-xs mt-1.5 hidden">请输入有效的学科名称</p>
                    </div>

                    <!-- 价格 -->
                    <div class="form-group">
                        <label for="price" class="block text-sm font-medium text-gray-700 mb-2">
                            价格 <span class="text-red-500">*</span>
                        </label>
                        <input type="number" step="0.01" min="0" id="price" name="price" placeholder="请输入学科价格" class="form-input" required>
                        <p class="text-red-500 text-xs mt-1.5 hidden">请输入有效的价格</p>
                    </div>

                    <!-- 类型 -->
                    <div class="form-group">
                        <label for="type" class="block text-sm font-medium text-gray-700 mb-2">
                            类型 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="type" name="type" placeholder="请输入学科类型" class="form-input" required>
                        <p class="text-red-500 text-xs mt-1.5 hidden">请输入学科类型</p>
                    </div>

                    <!-- 作者 -->
                    <div class="form-group">
                        <label for="author" class="block text-sm font-medium text-gray-700 mb-2">
                            作者 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="author" name="author" value="${user.name}" placeholder="作者名称" class="form-input" required>
                    </div>
                </div>
            </div>

            <!-- 资源信息部分 -->
            <div>
                <h3 class="text-lg font-semibold mb-5 flex items-center text-dark">
                    <i class="fa fa-file-text-o text-primary mr-3"></i>资源信息
                    <div class="flex-grow h-px bg-gray-200 ml-3"></div>
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 图片 -->
                    <div class="form-group">
                        <label for="img" class="block text-sm font-medium text-gray-700 mb-2">
                            图片
                        </label>
                        <input type="url" id="img" name="img" placeholder="请输入图片URL" class="form-input">
                        <p class="text-neutral text-xs mt-1.5">支持JPG、PNG格式的网络图片地址</p>
                    </div>

                    <!-- 视频链接 -->
                    <div class="form-group">
                        <label for="video" class="block text-sm font-medium text-gray-700 mb-2">
                            视频链接
                        </label>
                        <input type="url" id="video" name="video" placeholder="请输入视频链接" class="form-input">
                        <p class="text-neutral text-xs mt-1.5">支持主流视频平台的分享链接</p>
                    </div>

                    <!-- 时长 -->
                    <div class="form-group md:col-span-2">
                        <label for="duration" class="block text-sm font-medium text-gray-700 mb-2">
                            时长
                        </label>
                        <input type="text" id="duration" name="duration" placeholder="请输入时长，例如：45分钟" class="form-input">
                    </div>
                </div>
            </div>

            <!-- 学科描述部分 -->
            <div>
                <h3 class="text-lg font-semibold mb-5 flex items-center text-dark">
                    <i class="fa fa-align-left text-primary mr-3"></i>学科描述
                    <div class="flex-grow h-px bg-gray-200 ml-3"></div>
                </h3>

                <div class="form-group">
                    <label for="describe1" class="block text-sm font-medium text-gray-700 mb-2">
                        描述 <span class="text-red-500">*</span>
                    </label>
                    <textarea id="describe1" name="describe1" placeholder="请输入学科描述，介绍学科内容、特点和学习目标等信息" class="form-input min-h-[120px] resize-y" required></textarea>
                    <p class="text-red-500 text-xs mt-1.5 hidden">描述内容至少需要20个字符</p>
                    <p class="text-neutral text-xs mt-1.5">请简要介绍学科的主要内容和特点（不少于20字）</p>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
                <button type="button" id="resetBtn" class="bg-gray-200 text-gray-700 px-6 py-3 rounded-lg font-medium btn-effect hover:bg-gray-300">
                    <i class="fa fa-refresh mr-2"></i>重置
                </button>
                <button type="submit" class="bg-primary text-white px-6 py-3 rounded-lg font-medium btn-effect hover:bg-primary/90">
                    <i class="fa fa-check-circle mr-2"></i>提交学科信息
                </button>
            </div>
        </form>
    </div>

    <!-- 帮助卡片 -->
    <div class="bg-white rounded-xl p-6 mt-6 card-shadow">
        <h4 class="font-medium text-dark mb-3 flex items-center">
            <i class="fa fa-lightbulb-o text-accent mr-2"></i>使用提示
        </h4>
        <ul class="text-neutral text-sm space-y-2">
            <li class="flex items-start">
                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                <span>带 <span class="text-red-500">*</span> 的字段为必填项，必须填写</span>
            </li>
            <li class="flex items-start">
                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                <span>学科名称应简洁明了，能准确反映学科内容</span>
            </li>
            <li class="flex items-start">
                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                <span>上传的图片建议尺寸为400x300像素，将用于学科展示</span>
            </li>
        </ul>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t mt-12 py-6">
    <div class="container mx-auto px-4 text-center text-neutral text-sm">
        <p>© 2023 教师管理系统 - 版权所有</p>
    </div>
</footer>

<!-- 表单验证脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('subjectForm');
        const resetBtn = document.getElementById('resetBtn');

        // 表单字段
        const fields = {
            gname: document.getElementById('gname'),
            price: document.getElementById('price'),
            type: document.getElementById('type'),
            author: document.getElementById('author'),
            describe1: document.getElementById('describe1'),
            img: document.getElementById('img'),
            video: document.getElementById('video')
        };

        // 显示错误信息
        function showError(field, message) {
            const errorElement = field.nextElementSibling;
            if (errorElement && errorElement.classList.contains('text-red-500')) {
                errorElement.textContent = message;
                errorElement.classList.remove('hidden');
            }
            field.classList.add('border-red-500');
            field.classList.add('focus:border-red-500');
            field.classList.add('focus:ring-red-200');
        }

        // 清除错误信息
        function clearError(field) {
            const errorElement = field.nextElementSibling;
            if (errorElement && errorElement.classList.contains('text-red-500')) {
                errorElement.classList.add('hidden');
            }
            field.classList.remove('border-red-500');
            field.classList.remove('focus:border-red-500');
            field.classList.remove('focus:ring-red-200');
        }

        // 验证URL
        function isValidUrl(url) {
            try {
                new URL(url);
                return true;
            } catch (e) {
                return false;
            }
        }

        // 验证单个字段
        function validateField(field) {
            clearError(field);

            if (field.hasAttribute('required') && field.value.trim() === '') {
                showError(field, '此字段为必填项');
                return false;
            }

            switch(field.id) {
                case 'gname':
                    if (field.value.trim().length < 2) {
                        showError(field, '学科名称至少需要2个字符');
                        return false;
                    }
                    break;
                case 'price':
                    if (field.value <= 0) {
                        showError(field, '价格必须大于0');
                        return false;
                    }
                    break;
                case 'describe1':
                    if (field.value.trim().length < 20) {
                        showError(field, '描述内容至少需要20个字符');
                        return false;
                    }
                    break;
                case 'img':
                case 'video':
                    if (field.value.trim() !== '' && !isValidUrl(field.value.trim())) {
                        showError(field, '请输入有效的URL地址');
                        return false;
                    }
                    break;
            }

            return true;
        }

        // 绑定字段验证事件
        Object.values(fields).forEach(field => {
            field.addEventListener('blur', function() {
                validateField(this);
            });

            field.addEventListener('input', function() {
                if (this.classList.contains('border-red-500')) {
                    validateField(this);
                }
            });
        });

        // 表单提交验证
        form.addEventListener('submit', function(e) {
            let isValid = true;

            // 验证所有字段
            Object.values(fields).forEach(field => {
                if (!validateField(field)) {
                    isValid = false;
                }
            });

            if (!isValid) {
                e.preventDefault();
                // 滚动到第一个错误字段
                const firstError = document.querySelector('.text-red-500:not(.hidden)');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            } else {
                // 显示加载状态
                const submitBtn = form.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>提交中...';
            }
        });

        // 重置按钮功能
        resetBtn.addEventListener('click', function() {
            if (confirm('确定要重置表单吗？所有已填写内容将被清空。')) {
                form.reset();

                // 清除所有错误状态
                Object.values(fields).forEach(field => {
                    clearError(field);
                });

                // 聚焦到第一个字段
                fields.gname.focus();
            }
        });
    });
</script>
</body>
</html>